<template>
  <div class="padding page-content">
    <div class="page-main">
      <a-form :form="form">
        <a-row>
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['uuid']" disabled type="hidden"/>
          </a-form-item>
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['interfaceType']" disabled type="hidden"/>
          </a-form-item>
          <a-col span="24">
            <a-form-item :label="'接口分类'" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-select v-decorator="['classificationUuid',{ rules: [{ required: true, message: '接口分类不能为空' }]}]"
                        style="width: 100%" placeholder="请选择接口分类"
              >
                <a-select-option v-for="item in classifyData" :value="item.uuid" :key="item.uuid">
                  {{item.classificationName}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="接口名称" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-input
                placeholder="请输入接口名称"
                v-decorator="['interfaceName',{
                  rules: [
                    {
                      required: true,
                      message: '接口名称不能为空'
                    },
                    {
                      pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
                      message: '编码只能是汉字、数字、字母、下划线'
                    }
                  ]
                }]"/>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="接口编码" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-input
                placeholder="请输入接口编码"
                v-decorator="['interfaceCode',{
                  rules: [{
                    required: true,
                    message: '编码不能为空'
                  },{
                    pattern: /^[a-zA-Z0-9_]*$/,
                    message: '编码只能是数字、字母、下划线'
                  }]
                }]"
              />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item :label="$ct('state','状态')" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-select
                  v-decorator="['interfaceStatus',{ initialValue: 'intetface_status.01' ,rules: [{ required: true, message: '状态不能为空' }]}]"
                  style="width: 100%" allowClear>
                <a-select-option value="intetface_status.01">开发中</a-select-option>
                <a-select-option value="intetface_status.02">已完成</a-select-option>
                <a-select-option value="intetface_status.03">需修改</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item :label="$ct('sort','排序')" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-input-number placeholder="请输入排序"
                              v-decorator="['interfaceSort',{ rules: [{ required: false, message: '排序不能为空！' }] }, ]"
                              :min="1" :max="9999"/>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item :label="$ct('describe','描述')" :labelCol="labelCol"
                         :wrapperCol="wrapperCol">
              <a-textarea placeholder="请输入描述" :rows="3" v-decorator="['interfaceRemake']"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
  import pick from 'lodash.pick';

  const fields = ['uuid', 'classificationUuid', 'interfaceName', 'interfaceCode', 'interfaceStatus', 'interfaceSort', 'interfaceRemake','interfaceType'];
  export default {
    components: {},
    props: {
      isEdit: Boolean,
    },
    data() {
      return {
        form: this.$form.createForm(this),
        tableVisible: false,
        model:{},
        labelCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 3,
          },
        },
        wrapperCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 21,
          },
        },
        url: {
          classifyData: '/system/sysInterfaceClassification/selectAll'
        },
        classifyData: [], //分类数据
      };
    },
    created() {
      //获取分类数据
      this.getClassifyData()
    },
    mounted() {
      // 防止表单未注册
      fields.forEach((v) => this.form.getFieldDecorator(v));
      // 当 model 发生改变时，为表单设置值
      this.$watch("model", () => {
        this.form.resetFields()
        this.model && this.form.setFieldsValue(pick(this.model, fields));
      });
    },
    methods: {
      //获取分类数据
      getClassifyData() {
        this.$post(this.url.classifyData, {}).then(res => {
          if (res) {
            this.classifyData = res.data
          }
        })
      },
      //表单验证
      validateData() {
        let data = {}
        this.form.validateFields((errors, values) => {
          if (!errors) {
            data = values
          } else {
            data = null;
          }
        })
        return data;
      },
      //获取表单数据
      getBasicData() {
        return this.form.getFieldsValue();
      },
      selector(e) {
        this.tableVisible = false
      }
    },

  }
</script>

<style lang="less" scoped>
  // .ant-form{
  // 	border-radius: 10px;
  // 	min-height: 500px;
  // 	margin: 0 auto;
  // 	padding: 30px 20px 50px 20px;
  // 	box-shadow: 1px 2px 8px #e8e8e8;
  // }

  .page-content {
    height: calc(100vh - 76px);
    margin: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .page-main {
      width: 800px;
      height: 100%;
    }
  }

  .col-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    height: calc(100vh - 116px);
  }
</style>
